<template>
  <div class="order-list">
    <van-nav-bar title="订单列表" class="bar"
      left-arrow
      left-text="登出"
      @click-left="onClickLeft"
    >
      <template #right v-if="user.state !== 2">
        <router-link to="/list/create">
          <van-icon name="plus" size="20" />
        </router-link>
      </template>
    </van-nav-bar>
    <van-swipe-cell
      v-for="(item, index) in orderList"
      :key="index"
      class="list-item"
      >
      <div class="panel">
        <div class="left">
          <div class="title">
            <div class="left">
              <van-icon class="icon" name="logistics"></van-icon>
              <span class="name">{{item.receiver.name}}</span>
            </div>
            <div
              class="order-state"
              :class="orderStateCls(item.state)"
            >
              {{orderStateMsg(item.state)}}
            </div>
          </div>
          <p class="address van-multi-ellipsis--l2">{{item.receiver.address}}</p>
          <div class="footer">
            <p>订单编号：{{item.code}}</p>
            <p>创建时间：{{time(item.code)}}</p>
          </div>
        </div>
        <div class="right" @click="selectItem(item)">
          <van-icon class="icon" name="arrow"></van-icon>
        </div>
      </div>
      <template #right v-if="!isDelivery">
        <div class="delete" @click="deleteItem(item, index)">
          <van-icon class="icon" name="delete"></van-icon>
        </div>
      </template>
    </van-swipe-cell>
    <p class="no-result" v-show="showNoResult">{{noResultMsg}}</p>
    <load-err class="load-err" v-show="isLoadErr" @refresh="reload"></load-err>
    <keep-alive exclude="receive">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import LoadErr from 'components/load-err/load-err'
import { getOrderList, deleteOrder } from 'service/order'
import { userLogout } from 'service/user'
import { formatTime } from 'common/js/time'
// import { User } from 'classes/user'
import { __getUser } from 'common/js/user'

export default {
  name: 'OrderList',
  data () {
    return {
      orderList: [],
      noResultMsg: '暂无订单',
      isLoadErr: false,
      user: __getUser(),
      welcomeWord: ['客户', '快递员', '管理员'],
      orderMsgs: ['未处理', '运输中...', '待取件', '已取件']
    }
  },
  created () {
    this._getList()
    this.$notify({
      type: 'primary',
      message: `欢迎！ ${this.welcomeWord[this.user.state - 1]} ${this.user.username}`
    })
  },
  computed: {
    isDelivery () {
      return this.user.state === 2
    },
    showNoResult () {
      return !this.orderList.length && !this.isLoadErr
    }
  },
  methods: {
    // _getUser () {
    //   getUser().then((user) => {
    //     this.$notify({
    //       type: 'primary',
    //       message: `欢迎！ ${this.welcomeWord[user.state - 1]} ${user.username}`
    //     })
    //     this.user = new User(user)
    //     __setUser(this.user)
    //   }).catch(() => {})
    // },
    _getList () {
      getOrderList(this.$router, this.reload).then((res) => {
        this.orderList = res
      }).catch((msg) => {
        this.loadErr(msg)
      })
    },
    orderStateMsg (state) {
      return this.orderMsgs[state - 1]
    },
    orderStateCls (state) {
      return 'state-' + state
    },
    onClickLeft () {
      userLogout()
      this.$router.push({
        path: '/login'
      })
    },
    loadErr (msg) {
      this.isLoadErr = true
    },
    reload () {
      this.isLoadErr = false
      this._getList()
    },
    time (time) {
      return formatTime(time)
    },
    selectItem (item) {
      this.$router.push({
        path: '/list/detail',
        query: {
          id: item.id
        }
      })
    },
    deleteItem (item, index) {
      this.$toast.loading({
        duration: 0,
        message: '正在删除...',
        forbidClick: true
      })
      deleteOrder(this.orderList[index], this.$router)
        .then(() => {
          this.orderList.splice(index, 1)
          this.$toast.success({
            message: '删除成功'
          })
        })
        .catch(msg => {
          this.$toast.fail({
            message: msg
          })
        })
    }
  },
  components: {
    LoadErr
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~stylus/variable"
  @import "~stylus/method"
  .order-list
    padding-bottom: 3rem
    .bar
      margin-bottom: 1rem
    .panel
      display: flex
      panel()
      padding: 1.5rem .5rem 1.5rem 1.7rem
      .left
        flex: 1
        .title
          display: flex
          height: 3rem
          line-height: 3rem
          align-items: center
          .left
            flex: 1
            display: flex
            align-items: center
            .icon
              display: block
              font-size: 2rem
            .name
              display: block
              margin-left: 1.5rem
              font-weight: bold
              font-size: 1.7rem
          .order-state
            font-size: 1.4rem
            font-weight: bold
            transform: translate3d(1.7rem, 0, 0)
            &.state-1, &.state-4
              color: $color-gray
            &.state-2
              color: $color-orange
            &.state-3
              color: $color-red
        .address
          margin: 1.2rem 0
          line-height: 2rem
          font-size: 1.4rem
        .footer
          line-height: 1.6rem
          font-size: 1.2rem
          color: $color-gray
      .right
        flex: 0 0 3rem
        display: block
        position: relative
        font-size: 1.8rem
        color: $color-gray
        .icon
          display: block
          position: absolute
          width: 100%
          top: 50%
          transform: translate3d(0, -50%, 0)
          text-align: center
    .van-swipe-cell__right
      .delete
        display: flex
        height: 100%
        .icon
          display: block
          align-items: center
          margin: auto 2rem
          height: 3.5rem
          width: 3.5rem
          background: rgb(230, 50, 50)
          font-size: 1.5rem
          text-align: center
          border-radius: 50%
          line-height: 3.5rem
          color: #fff
    .no-result
      position: absolute
      top: 45%
      width: 100%
      text-align: center
      transform: translate3d(0, -50%, 0)
      font-size: 2rem
      color: $color-gray
    .load-err
      position: absolute
      top: 45%
      width: 100%
      transform: translate3d(0, -50%, 0)
</style>
